<template>
    <div style="font-family:'Microsoft YaHei';background:#eee;padding-top:30px;min-height:818px;">
        <div id="printArea" style="margin:0 auto;width:1200px;min-height:818px;" v-loading="loading">
            <div style="margin:0 auto; padding:30px 30px 0;position:relative;background:#fff;height:818px;" v-for="(item, index) in tableData" :key="index">
                <div style="position:absolute;bottom:80px;left:80px;z-index:1" v-if="shzt == '已审核'">
                    <el-image :src="yinz" style="width:180px;height:180px"></el-image>
                </div> 
                <div style="font-size:28px;font-weight:bold;text-align:center;padding:15px;background:white;">中恒 仓库进仓作业单</div>
                <el-row type="flex" justify="space-between" style="font-size:18px">
                    <el-col >中恒纺织交易市场(广东)有限公司</el-col>
                    <el-col style="text-align:right;">{{nowDate}}</el-col> 
                </el-row>
                <div style="border-top:2px solid #000;margin:5px 0"></div>
                <div style="font-size:16px;">
                    <el-row type="flex" justify="space-between" style="padding:10px 0 5px;">
                        <el-col :span="6">进仓单号：{{details.pzbh}}</el-col>
                        <el-col :span="5">仓    库：{{details.spckmc}}</el-col>
                        <el-col :span="5">入库日期：{{details.ssrqid}}</el-col>
                        <el-col :span="4">提单号：{{details.wbdh}}</el-col><!--外部单号-->
                        <el-col :span="4">封条/柜号：</el-col>
                    </el-row>
                    <el-row type="flex" justify="space-between" style="padding:15px 0 5px 0;">
                        <el-col :span="16">客户名称：{{details.khmc}}</el-col>
                        <el-col :span="8">客户代码：</el-col>
                    </el-row>
                </div>
                <el-table
                    :data="item"
                    :header-cell-style="{background:'#fff',color:'#000',fontSize:'18px'}"
                    show-summary
                    :summary-method="getSummaries"
                    style="color:#000;height:470px;font-size:18px;margin-top:10px;width:100%;"
                    class="print-table"
                    >
                    <el-table-column
                        prop="date"
                        label="行号"
                        type="index"
                        width="50px"
                        align="center"
                        :index="indexMethod"
                        class-name="columnClass">
                    </el-table-column>
                    <!-- <el-table-column
                        prop="sptm"
                        label="条码"
                        width="120px"
                        align="center">
                    </el-table-column> -->
                    <el-table-column
                        prop="ckcw"
                        label="仓位"
                        align="center"
                        width="70px"
                        class-name="columnClass">
                    </el-table-column>
                    <el-table-column
                        prop="spmc"
                        label="包装规格"
                        align="center"
                        width="90px"
                        class-name="columnClass">
                    </el-table-column>
                    <el-table-column
                        prop="spzs"
                        label="物品规格"
                        align="center"
                        width="200px"
                        class-name="columnClass"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="spbh"
                        label="批号"
                        align="center"
                        width="200px"
                        class-name="columnClass">
                    </el-table-column>
                    <el-table-column
                        prop="spgh"
                        label="柜号"
                        align="center"
                        width="200px"
                        class-name="columnClass">
                    </el-table-column>
                    <!-- <el-table-column
                        prop="spjs_unit"
                        label="单位"
                        align="center"
                        width="50px">
                    </el-table-column> -->
                    <el-table-column
                        prop="spjsl"
                        label="件重(KG)"
                        align="center"
                        width="110px"
                        class-name="columnClass">
                    </el-table-column>
                    <el-table-column
                        prop="spjs"
                        label="件数(件)"
                        align="center"
                        width="100px"
                        class-name="columnClass">
                    </el-table-column>
                    <!-- <el-table-column
                        prop="spsl_unit"
                        label="单位"
                        align="center"
                        width="50px">
                    </el-table-column> -->
                    <el-table-column
                        prop="spsl"
                        label="重量(吨)"
                        align="center"
                        width="120px"
                        class-name="columnClass">
                    </el-table-column>
                </el-table>
                <div style="font-size:16px;margin-top:15px">
                    <el-row type="flex" justify="space-around" style="padding:15px 0;">
                        <el-col>开始时间：</el-col>
                        <el-col>结束时间：</el-col>
                        <el-col>司机：{{ details.dzzy7}}</el-col>
                        <el-col>车牌号：{{details.dzzy6}}</el-col>
                    </el-row>
                    <el-row type="flex" justify="space-around" style="padding:15px 0;">
                        <el-col>制单人：{{ details.rsopmc }}</el-col>
                        <el-col>搬运工号：</el-col>
                        <el-col>仓管员：</el-col>
                        <el-col>送货人签名：</el-col>
                    </el-row>
                </div>
            </div>
        </div>
        <div style="padding:20px 0 150px;text-align:center">
            <el-button @click="back">返回</el-button>
            <el-button v-print="print" type="primary">打 印</el-button>
        </div>
  </div>
</template>
<script>
    import yinz from '@/assets/images/yinz.png' 
    import { warehouseInPrint} from "@/api/storage/commonGoods/warehouseIn";

    export default {
        name: 'WarehouseInPrint',
        data () {
            return {
                yinz:yinz,
                loading:true,
                queryParams: {
                    dzid: ""
                },
                //打印详情
                details:{},
                //打印列表
                tableData:[],
                //打印审核状态
                shzt:'',
                //打印每页条数
                pageSize:6,
                //打印时间
                nowDate:'',
                print: {
                    id: 'printArea',
                    popTitle: '', // 打印配置页上方的标题
                    extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
                    preview: false, // 是否启动预览模式，默认是false
                    previewTitle: '', // 打印预览的标题
                    previewPrintBtnLabel: '', // 打印预览的标题下方的按钮文本，点击可进入打印
                    zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
                    previewBeforeOpenCallback () { console.log('正在加载预览窗口！');}, // 预览窗口打开之前的callback
                    previewOpenCallback () { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback
                    beforeOpenCallback () { console.log('开始打印之前！') }, // 开始打印之前的callback
                    openCallback () { console.log('执行打印了！') }, // 调用打印时的callback
                    closeCallback () { console.log('关闭了打印工具！') }, // 关闭打印的callback(无法区分确认or取消)
                    clickMounted () { console.log('点击v-print绑定的按钮了！') },
                    // url: 'http://localhost:8080/', // 打印指定的URL，确保同源策略相同
                    // asyncUrl (reslove) {
                    //   setTimeout(() => {
                    //     reslove('http://localhost:8080/')
                    //   }, 2000)
                    // },
                    standard: '',
                    extarCss: ''
                }
            }
        },
        beforeRouteEnter(to, from, next) {
            const query = to.query
            next(vm => {   
                if(Object.keys(query).length > 0) {
                    vm.queryParams.dzid= query.dzid
                    vm.shzt = query.shzt
                    vm.getList()
                }
            })
        },
        methods: {
            /**打印数据 */
            getList() {
                this.loading = true
                warehouseInPrint(this.queryParams).then(response => {
                    this.loading = false
                    if(response.data.a.length > 0) {
                        this.details = response.data.a[0]
                    }
                    if(response.data.b.length > 0) {
                        let data = response.data.b
                        for(let i in data) {
                            // data[i].spjs_unit = "件"
                            // data[i].spsl_unit = "吨"
                            this.details.ssrqid = data[i].ssrqid
                        }
                        let num = this.pageSize
                        let tableData = []
                        for(let i=0,len=data.length; i < len; i+=num) {
                            tableData.push(data.slice(i, i+num))
                        }
                        
                        this.tableData = tableData
                    }
                    if(response.data.c.length > 0) {
                        this.nowDate = response.data.c[0].date
                    }
                    
                })  
            },
            //合计
            getSummaries({ columns, data }) {
                const sums = []
                columns.forEach((column, index) => {
                    if(index === 6) {
                        sums[index] = "合计："
                        return
                    }
                    // if(column.property === 'spjs_unit') {
                    //     sums[index] = "件"
                    // }
                    // if(column.property === 'spsl_unit') {
                    //     sums[index] = "吨"
                    // }
                    if ((column.property === "spjs" || column.property === "spsl")) {
                    const values = data.map((item) => {
                        return parseFloat(this.delcommafy(item[column.property]))
                    });
                    sums[index] = values.reduce((prev, curr) => {
                        return prev + curr
                    }, 0);
                    if(column.property === 'spjs') {
                        sums[index] = parseFloat(sums[index].toFixed(3)) + '件'
                    }
                    if(column.property === 'spsl') {
                        sums[index] = parseFloat(sums[index].toFixed(6)) + '吨'
                    }
                    }
                })
                return sums
            },
            indexMethod(index) {
                return index + 1
            },
            back() {
                this.$tab.closePage(this.$route)
                this.$router.push({name:"WarehouseIn"})
            },
        }
    }
</script>
<style lang="scss">
    .columnClass {
        padding:0 !important;
        height:50px !important;
        font-size:16px;
        .cell {
            padding:0 3px !important;
        }
    }
</style>